<template>
    <div >
        <div v-for="(item,index) in list" >
    <el-row :gutter="20">
        <el-col :span="4" style="margin-top: 5px"><el-input v-model="item.contact_name"    placeholder="请输入联系人姓名"></el-input></el-col>
        <el-col :span="4" style="margin-top: 5px"><el-input v-model="item.contact_tel"  placeholder="请输入联系人电话"></el-input></el-col>
        <el-col :span="4" style="margin-top: 5px"><el-input v-model="item.company_name"  placeholder="公司名称"></el-input></el-col>
        <el-col :span="5" style="margin-top: 10px" >
        <el-switch @change="change"
                v-model="item.isDisabled"
                active-color="#13ce66" active-value="1" inactive-value="0"
                inactive-color="#ff4949" active-text="设置为主要联系人" name="contact_disable[]" >
        </el-switch>
        </el-col>
        <el-col :span="4">
            <el-button size="small"  @click="delContact(index)">删除</el-button>
        </el-col>
    </el-row>
        </div>
        <el-row :gutter="20" style="margin-top: 10px">
            <el-col :span="4">
           <el-button type="primary" size="small" @click="addContact()">添加新联系人</el-button>
            </el-col>
        </el-row>
            <input hidden name="contact" v-model="listString"></input>
    </div>

</template>

<script>
    import axios from 'axios'
    export default {
        name: "contact",
        props:['workshop_id'],
        data(){
            return {
                list:[{"contact_name":"","contact_tel":"",'company_name':''}]
            };
        },
        created(){
            axios.get('/api/workshop_contact/'+this.workshop_id).then(data=>{
                this.list=data.data
            });
            console.log(1221)
        },
        methods:{
            addContact(){
                this.list.push( {
                    contact_name:'',
                    contact_tel:'',
                    isDisabled:0,
                    company_name:'',
                });
            },
            delContact(index){
                this.list.splice(index,1);
            },
            change(value){
                console.log(value)
            }
        },
        computed:{
            listString:function(){
              return  JSON.stringify(this.list);
            }
        }
    }
</script>

<style scoped>

</style>
